import * as echarts from 'echarts'
import { Ref } from 'vue'

export const useOptionsTwo = () => {
  const data2: Ref<
    {
      typeName: string
      number: number
    }[]
  > = ref([])

  const dataSet = computed(() => {
    return data2.value?.map((item) => {
      return [item.typeName, item.number]
    })
  })

  const loading2 = ref(false)
  const option2 = computed(() => {
    return {
      backgroundColor: '#0f375f',
      grid: {
        top: '25%',
        bottom: '10%'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
          label: {
            show: true
          }
        }
      },
      legend: {
        data: ['数量', '同比趋势'],
        top: '15%',
        textStyle: {
          color: '#ffffff'
        }
      },
      xAxis: {
        data: dataSet.value.map((item) => {
          return item[0]
        }),
        axisLine: {
          show: false //隐藏X轴轴线
        },
        axisTick: {
          show: false //隐藏X轴刻度
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#ebf8ac' //X轴文字颜色
          }
        }
      },
      yAxis: [
        {
          type: 'value',
          name: '单位：件',
          nameTextStyle: {
            color: '#ebf8ac'
          },
          position: 'right',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            formatter: '{value}', //右侧Y轴文字显示
            textStyle: {
              color: '#ebf8ac'
            }
          }
        },
        // 背景
        {
          type: 'value',
          gridIndex: 0,
          min: 50,
          max: 100,
          splitNumber: 8,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
            }
          }
        }
      ],
      series: [
        {
          name: '同比趋势',
          type: 'line',
          yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          smooth: true, //平滑曲线显示
          showAllSymbol: true, //显示所有图形。
          symbol: 'circle', //标记的图形为实心圆
          symbolSize: 10, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: '#058cff'
          },
          lineStyle: {
            color: '#058cff'
          },
          areaStyle: {
            color: 'rgba(5,140,255, 0.2)'
          },
          encode: {
            x: 'typeName',
            y: 'number'
          }
        },
        {
          name: '数量',
          type: 'bar',
          barWidth: 15,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#6f3d9e'
                },
                {
                  offset: 1,
                  color: '#3637a3'
                }
              ])
            }
          },
          encode: {
            x: 'typeName',
            y: 'number'
          }
        }
      ],
      dataset: {
        // 数据源
        dimensions: ['typeName', 'number'],
        sourceHeader: false,
        source: dataSet.value
      }
    }
  })
  return {
    data2,
    loading2,
    option2
  }
}
